<template>
  <div>
    <!-- 个人信息的卡片 -->
    <el-row>
      <el-col :span="7">

        <el-card class="box-card">

          <div align="center">
            <img class="personalImg" src="..\src\assets\images\profile.jpg" alt="获取失败">
          </div>

          <div slot="header" class="clearfix">
            <span>个人信息</span>

            <el-button class="el-icon-setting" style="float: right; padding: 5px" @click="modifyVisable" type="primary">修改数据</el-button>
          </div>
          <p>
            <i class="el-icon-user-solid"></i>
            <span style="margin-left:5px" class="text">用户名称</span>
            <span class="item" style="float:right">{{leftForm.userName}}</span>
          </p>
          <hr />
          <p>
            <i class="el-icon-mobile-phone"></i>
            <span style="margin-left:5px" class="text">手机号码</span>
            <span class="item" style="float:right">{{leftForm.phonenumber}}</span>
          </p>
          <hr />
          <p>
            <i class="el-icon-suitcase"></i>
            <span style="margin-left:5px" class="text">用户邮箱</span>
            <span class="item" style="float:right">{{leftForm.email}}</span>
          </p>
          <hr />
          <p>
            <i class="el-icon-rank"></i>
            <span style="margin-left:5px" class="text">所属部门</span>
            <span class="item" style="float:right">{{leftForm.deptInfo[0]}} / {{leftForm.deptInfo[1]}}</span>
          </p>
          <hr />
          <p>
            <i class="el-icon-s-custom"></i>
            <span style="margin-left:5px" class="text">所属角色</span>
            <span class="item" style="float:right">{{leftForm.roles[0].roleName}} , {{leftForm.roles[1].roleName}}</span>
          </p>
          <hr />
          <p>
            <i class="el-icon-date"></i>
            <span style="margin-left:5px" class="text">创建日期</span>
            <span class="item" style="float:right">{{leftForm.createTime}}</span>
          </p>

        </el-card>
      </el-col>

      <el-col :span="16" style="margin-left:10px" v-if="modifyVisibleCard == 1">
        <!-- 基本资料 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">
              <el-form ref="form" :model="leftForm" :rules="rules" label-width="80px">
                <el-form-item label="用户昵称" prop="nickName">
                  <el-input v-model="leftForm.nickName" placeholder="请输入昵称"></el-input>
                </el-form-item>

                <el-form-item label="手机号码" prop="phoneNumber">
                  <el-input v-model="leftForm.phonenumber" placeholder="请输入手机号码"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="leftForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                  <el-radio v-model="leftForm.sex" label="0">男</el-radio>
                  <el-radio v-model="leftForm.sex" label="1">女</el-radio>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="修改密码" name="second">
              <el-form ref="form" :model="rightForm" :rules="rules" label-width="80px">
                <el-form-item label="旧密码" prop="oldPassword">
                  <el-input v-model="rightForm.oldPassword" placeholder="请输入旧密码"></el-input>
                </el-form-item>

                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="rightForm.newPassword" placeholder="请输入新秘密"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="secondNewPassword">
                  <el-input v-model="rightForm.secondNewPassword" placeholder="请再次输入密码"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>

            </el-tab-pane>
          </el-tabs>

        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      url: "src/assets/userPhoto.png",

      url_GET_getPersonalInfo: "http://localhost:8080/getPersonalInfo",

      modifyVisibleCard: 0,

      leftForm: {
        sex: "0",
      },
      rightForm: {},

      activeName: "first",

      rules: {
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        phoneNumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        oldPassword: [
          { required: true, message: "请输入旧密码密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        secondNewPassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 获取个人信息
    getPersonalInfo(userName) {
      this.$http
        .get(this.url_GET_getPersonalInfo, {
          params: {
            userName: userName,
          },
        })
        .then((result) => {
          this.leftForm = result.data.data;
          console.log(this.leftForm);
          console.log(result);
        });
    },

    modifyVisable() {
      if (this.modifyVisibleCard == 0) {
        this.modifyVisibleCard = 1;
      } else if (this.modifyVisibleCard == 1) {
        this.modifyVisibleCard = 0;
      }
    },
  },
  mounted() {
    console.log(Cookies.get("username"));
    this.getPersonalInfo(Cookies.get("username"));
  },
};
</script>

<style>
.personalImg {
  margin-top: -10px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.text {
  font-size: 15px;
  font-weight: bold;
}

p {
  padding: 15px 0px;
}

.box {
  width: 400px;
  height: 400px;
}
.item {
  margin-left: 30px;
}
.align-right hr {
  margin-right: 0;
}
</style>